<div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">

  <div class="title-block">
    <h1>{{ ordinal$ | async }}</h1>
    <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right">&#10005;</button>
  </div>

  <div class="clearfix"></div>

  <div class="box">
    <div class="row">
      <div class="col-md">
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td i18n="mempool-block.median-fee">Median fee</td>
              <td>~<app-fee-rate [fee]="mempoolBlock.medianFee" rounding="1.0-0"></app-fee-rate> <span class="fiat"><app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
            </tr>
            <tr>
              <td i18n="mempool-block.fee-span">Fee span</td>
              <td><span class="yellow-color">
                <app-fee-rate [fee]="mempoolBlock.feeRange[0]" [showUnit]="false"></app-fee-rate>
                -
                <app-fee-rate [fee]="mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1]"></app-fee-rate>
              </span></td>
            </tr>
            <tr>
              <td i18n="block.total-fees|Total fees in a block">Total fees</td>
              <td><app-amount [satoshis]="mempoolBlock.totalFees" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolBlock.totalFees" digitsInfo="1.0-0"></app-fiat></span></td>
            </tr>
            <tr>
              <td i18n="mempool-block.transactions">Transactions</td>
              <td>{{ mempoolBlock.nTx }}</td>
            </tr>
            <tr>
              <td i18n="mempool-block.size">Size</td>
              <td>
                <div class="progress">
                  <div class="progress-bar progress-mempool {{ (network$ | async) }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / stateService.blockVSize) * 100 + '%' }"></div>
                  <div class="progress-text" [innerHTML]="mempoolBlock.blockSize | bytes: 2"></div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <app-fee-distribution-graph *ngIf="webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
      </div>
      <div class="col-md chart-container">
        <div class="block-with-filters" *ngIf="webGlEnabled">
          <app-mempool-block-overview [index]="mempoolBlockIndex" (txPreviewEvent)="setTxPreview($event)" [showFilters]="true"></app-mempool-block-overview>
        </div>
        <app-fee-distribution-graph *ngIf="!webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
      </div>
    </div>
  </div>

  <br>

</div>
